<template>
  <div class="staff-wrap">
    <div class="staff-search">
      <div class="search-box">
        <div class="note" @click="note">功能说明</div>
        <div class="search-con">
          <input type="text" placeholder="请输入姓名或者工号" class="content" v-model="check" @blur="inputBlur"/>
          <img src="./search.png" class="icon" onclick="return false"/>
        </div>
        <div class="title" @click="searchStaff">搜索</div>
      </div>
      <div class="number-box">目前在职员工<span>{{number}}</span>名</div>
    </div>


    <div class="staff-list" ref="wrapper" v-if="showData == 1">
      <div class="staff-con">
        <div class="staff-box" v-for="(item,index) in userList" :key="index">
          <div class="staff-content">
            <span class="name">{{item.userName}}</span><span class="date">{{item.workTime}}</span>
          </div>
          <div class="staff-content">
            <span class="name">身份证号:</span><span class="number">{{item.userCardNumber}}</span>
            <button type="button" class="refuse" @click="delStaff(item.id)" v-if="!item.workNum">删除</button>
          </div>
          <div class="staff-content" v-if="item.workNum">
            <span class="name">工号:</span><span class="number">{{item.workNum}}</span>
            <button type="button" class="refuse" @click="delStaff(item.id)">删除</button>
          </div>
          <div class="line-box" v-if="index != userList.length-1"></div>
        </div>
      </div>
    </div>
    <div class="staff-info" @click="record">员工<br/>录入</div>

    <div class="empty-wrap" v-if="showData == 2">
      <div class="empty-box">
        <div class="img-box"><img src="./empty.png" class="empty" onclick="return false"/></div>
        <div class="tip">抱歉,未找到相关内容~</div>
      </div>
    </div>

    <!--提示语-->
    <v-dialog v-model="sendVal" :content="content" cancelText="否" confirmText="是" @confirm="confirm"
              @cancel="cancel"></v-dialog>

    <!--功能说明-->
    <div class="modal-wrap" v-show="rule">
      <div class="modal-box">
        <div class="modal-con">
          <div class="title-box">
            <span class="title">在职员工管理说明</span>
            <img src="./del.png" class="del-icon" @click="close" onclick="return false"/>
          </div>
          <div class="rule-box">
            1.该功能主要是用于驻厂老师管理所在企业的在职员工，只有员工的信息在在职员工列表中且入职日期超过九天才可以申请提前领工资的资格。
          </div>
          <div class="rule-box">
            2.点击“员工录入”按钮，则可以录入员工的信息。录入成功后则会显示在在职员工列表中。
          </div>
          <div class="rule-box">
            3.当驻厂老师确认该员工离职后，在列表中找到该员工的信息，然后点击“删除”按钮，则可以将该员工从在职员工列表中删除。同时也会将该员工从员工考勤列表中删除。
          </div>
        </div>
      </div>
    </div>

    <backpage @backPage="backPage"></backpage>
  </div>
</template>

<script>
  import {baseUrl} from "../../config/env"
  import dialog from "../../components/dialog"
  import BScroll from 'better-scroll'
  import {getDeviceRatio} from "../../config/util"
  import backpage from "../../components/backpage"
  /*获取当前缩放比*/
  const DEVICE_RATIO = getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   */
  /*上拉配置*/
  const UP_CONFIG = {
    threshold: -80 * DEVICE_RATIO,
  }

  export default {
    inject: ['reload'],
    data() {
      return {
        rule: false,
        sendVal: false,
        content: "请再次确认该员工已离职，是否在在职员工列表中删除该员工的信息，一旦确认，则同时也会在员工考勤列表中，将其信息删除。",
        userSign: "",
        check: "",
        userList: [],
        number: "",
        id: "",
        mechanismId: "",
        manageScroll: null,
        currentPage: 1,
        PageSize: 20,
        noMoreData: false,
        showData: 0
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.mechanismId = this.$route.query.mechanismId;
      this.queryStaff();
    },
    methods: {
      note() {//打开功能说明
        this.rule = true;
      },
      close() {
        this.rule = false;
      },
      delStaff(id) {//删除在职员工
        this.id = id;
        this.sendVal = true;
      },
      searchStaff() {//根据条件查询
        this.currentPage = 1;
        this.PageSize = 20;
        this.queryStaff(() => {
          //初始化Dom
          this.$nextTick(() => {
            this.manageScroll = null;
            this.noMoreData = false;
            this.initScroll();
          });
        });
      },
      queryStaff(callback) {//查询在职员工列表
        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/get_mechanism_user_list?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_money/get_mechanism_user_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&check=" + this.check + "&page=" + this.currentPage + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0) {
            this.number = resultObj.data.number;//在职员工数
            this.userList = resultObj.data.list;
            if (this.userList != null && this.userList.length > 0) {
              this.showData = 1;
              if (callback) {
                callback();
              }
              //DOM还没有更新
              this.$nextTick(() => {
                this.initScroll();
                this.manageScroll.on('touchEnd', (pos) => {
                  if (Math.abs(Math.round(pos.y)) > Math.abs(Math.round(this.manageScroll.maxScrollY + 1))) {
                    this.loadMore();
                  }
                });
              });
            } else {
              this.showData = 2;
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      record() {//员工录入
        this.$router.push({path: "/staffrecord", query: {"mechanismId": this.mechanismId}});
      },
      confirm() {
        let time = (new Date()).getTime();
        let url = baseUrl + "/work_money/del_mechanism_user?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/work_money/del_mechanism_user?mechanismUserIn=" + this.id + "&mechanismId=" + this.mechanismId + "&sgin=" + this.userSign + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          if (resultObj.code == 0) {
            if (resultObj.data == 0) {
              this.$vux.toast.text("删除失败,请重试", "middle");
              this.reload();
            } else {
              this.reload();
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch((error) => {
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      cancel() {
        this.sendVal = false;
      },
      loadMore() {//加载更多
        if (!this.noMoreData) {
          this.$vux.loading.show({
            text: '加载中',
          });
          let time = (new Date()).getTime();
          let url = baseUrl + "/work_money/get_mechanism_user_list?timestamp=" + time;
          let param = {"sgin": this.userSign, "timestamp": time};
          let signature = this.$signature(url, param);

          setTimeout(() => {
            this.axios.get(baseUrl + "/work_money/get_mechanism_user_list?sgin=" + this.userSign + "&mechanismId=" + this.mechanismId + "&check=" + this.check + "&page=" + (++this.currentPage) + "&size=" + this.PageSize + "&auth=" + signature + "&timestamp=" + time).then((res) => {
              let resulrObj = res.data;
              if (resulrObj.code == 0) {
                if (resulrObj.data.length > 0) {
                  this.userList = this.userList.concat(resulrObj.data);
                } else {
                  this.noMoreData = true;
                }
                this.$vux.loading.hide();
              } else {
                this.$vux.loading.hide();
                this.$vux.toast.text(resulrObj.msg, "middle");
              }
            })
          }, 500)
        }
      },
      initScroll() {//初始化BScroll
        if (!this.manageScroll) {
          this.manageScroll = new BScroll(this.$refs.wrapper, {
            probeType: 3,
            deceleration: 0.003,
            bounce: false,
            swipeTime: 2000,
            click: true,
            pullUpLoad: UP_CONFIG
          });
        } else {
          this.manageScroll.refresh();
        }
      },
      enable() {
        this.manageScroll && this.manageScroll.enable()
      },
      refresh() {
        this.manageScroll && this.manageScroll.refresh()
      },
      finishPullUp() {
        this.manageScroll && this.manageScroll.finishPullUp()
      },
      inputBlur() {
        window.scrollTo(0, 0);
      },
      backPage(){
        this.$router.push({path:"/residentIndex"});
      }
    },
    watch: {
      userList() {
        this.$nextTick(() => {
          this.manageScroll.refresh();
        })
      }
    },
    components: {
      "v-dialog": dialog,
      BScroll,
      backpage
    }
  }
</script>

<style lang="stylus" scoped>
  .staff-wrap
    width: 100%
    height: auto
    .staff-search
      position: fixed
      top: 0
      width: 100%
      height: auto
      .search-box
        display: flex
        align-items: center
        width: 100%
        height: 1.333333rem
        border-bottom: 1px solid rgba(230, 230, 230, 1)
        .note
          display: flex
          align-items: center
          text-align: center
          margin-left: 0.373333rem
          margin-right: 0.28rem
          width: 0.986666rem
          height: 0.946666rem
          border: 1px solid rgba(60, 175, 255, 1)
          border-radius: 0.08rem
          font-size: 0.333333rem
          font-weight: 500
          color: rgba(60, 175, 255, 1)
        .search-con
          position: relative
          display: flex
          align-items: center
          width: 69.86666%
          height: 0.946666rem
          background: rgba(255, 255, 255, 1)
          border: 1px solid rgba(126, 126, 126, 1)
          border-radius: 0.466666rem
          .content
            display: flex
            align-items: center
            height: 0.6rem
            line-height: 0.6rem
            margin-left: 0.733333rem
            font-size: 0.386666rem
            color: rgba(187, 187, 187, 1)
            border: none
            outline: none
          .icon
            position: absolute
            width: 0.373333rem
            height: 0.373333rem
            left: 0.24rem
            top: 0
            bottom: 0
            margin: auto
        .title
          margin-left: auto
          margin-right: 0.346666rem
          font-size: 0.386666rem
          font-weight: 500
          color: rgba(68, 68, 68, 1)
      .number-box
        display: flex
        align-items: center
        justify-content: center
        font-size: 0.373333rem
        color: rgba(255, 255, 255, 1)
        width: 100%
        height: 0.666666rem
        background: rgba(60, 175, 255, 1)
    .staff-list
      position: fixed
      top: 2.013rem
      width: 100%
      bottom: 0
      overflow: hidden
      .staff-box
        display: flex
        justify-content: center
        flex-direction: column
        width: 100%
        height: auto
        .staff-content
          display: flex
          align-items: center
          margin-left: 0.426666rem
          margin-bottom: 0.2rem
          margin-top: 0.2rem
          .name
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .number
            padding-left: 0.4rem
            font-size: 0.386666rem
            color: rgba(68, 68, 68, 1)
          .date
            margin-left: auto
            margin-right: 0.293333rem
            font-size: 0.346666rem
          .refuse
            margin-left: auto
            margin-right: 0.293333rem
            width: 1.84rem
            height: 0.693333rem
            line-height: 0.693333rem
            border: 0.027rem solid rgba(60, 175, 255, 1)
            border-radius: 0.346666rem
            font-size: 0.386666rem
            color: rgba(60, 175, 255, 1)
            background: rgba(255, 255, 255, 1)
      .line-box
        width: 100%
        height: 0.133333rem
        background: #F2F2F2
    .staff-info
      display: flex
      justify-content: center
      align-items: center
      color: rgba(255, 255, 255, 1)
      width: 1.293333rem
      height: 1.293333rem
      background: rgba(255, 96, 96, 1)
      box-shadow: 0rem 0.026666rem 0.066666rem 0rem rgba(193, 0, 0, 0.31)
      border-radius: 100%
      position: fixed
      right: 0.546666rem
      bottom: 1.546666rem
      z-index: 96
    .modal-box
      position: fixed
      top: 0
      left: 0
      right: 0
      bottom: 0
      z-index: 100
      background-color: rgba(0, 0, 0, 0.5)
      .modal-con
        position: absolute
        width: 100%
        height: 9.186666rem
        bottom: 0
        background: #FFF
        .title-box
          display: flex
          align-items: center
          width: 100%
          height: 1.333333rem
          border-bottom: 1px solid rgba(204, 204, 204, 1)
          .title
            display: flex
            justify-content: center
            width: 100%
            font-size: 0.44rem
            font-weight: 500
            color: rgba(27, 27, 27, 1)
          .del-icon
            position: absolute
            width: 0.386666rem
            height: 0.386666rem
            right: 0.373333rem
        .rule-box
          width: 92.53%
          height: auto
          margin: 0 auto
          margin-top: 0.373333rem
          font-size: 0.413333rem
          color: rgba(68, 68, 68, 1)
          line-height: 0.626666rem
          margin-bottom: 0.52rem
    .empty-wrap
      display: flex
      align-items: center
      justify-content: center
      width: 100%
      height: auto
      position: fixed
      top: 2.013rem
      left: 0
      right: 0
      bottom: 0
      z-index: -1
      .empty-box
        width: 4.773rem
        height: auto
        .img-box
          width: 100%
          height: 4.773rem
          .empty
            width: 100%
            height: 100%
        .tip
          display: flex
          justify-content: center
          margin-top: 0.387rem
          font-size: 0.373rem
          color: rgba(68, 68, 68, 1)
</style>
